<template>
	<div class="bg">
    <NewHomeHeader/>
    <div class="swiper-container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide"><HomeItemFirst :activeIndex="activeIndex"/></div>
	        <div class="swiper-slide"><HomeItemSecond :activeIndex="activeIndex"/></div>
	        <div class="swiper-slide"><HomeItemThird :activeIndex="activeIndex"/></div>
          <div class="swiper-slide"><HomeItemFour :activeIndex="activeIndex"/></div>
          <div class="swiper-slide"><HomeItemFive :activeIndex="activeIndex"/></div>
	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination"></div>
	    
	    <!-- 如果需要导航按钮 -->
	    <!-- <div class="swiper-button-prev"></div>
	    <div class="swiper-button-next"></div> -->
	    
	    <!-- 如果需要滚动条 -->
	    <!-- <div class="swiper-scrollbar"></div> -->
	</div>


		<!-- <Footer></Footer> -->
	</div>
</template>

<script>
	import Header from "@/views/front/components/Header";
	import Footer from "@/views/front/components/Footer";
  import NewHomeHeader from "./components/NewHomeHeader.vue"
  import HomeItemFirst from "./components/HomeItemFirst.vue"
  import HomeItemSecond from "./components/HomeItemSecond.vue"
  import HomeItemThird from "./components/HomeItemThird.vue"
  import HomeItemFour from "./components/HomeItemFour.vue"
  import HomeItemFive from "./components/HomeItemFive.vue"

  import Swiper from "swiper";
  import "swiper/dist/css/swiper.min.css";

	export default {
    name: 'NewHome',
		components: {
			Header,
			Footer,
      NewHomeHeader,
      HomeItemFirst,
      HomeItemSecond,
      HomeItemThird,
      HomeItemFour,
      HomeItemFive,
		},
		data() {
			return {
        activeIndex: 0
			}
		},
		methods: {
			updateView(realIndex) {
        this.$nextTick(() => {
          this.activeIndex = realIndex
          console.log(1111,this.activeIndex)
        })
      }
  	},
    mounted(){
      const that = this;
      new Swiper ('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        paginationClickable :true,
        // loop: true,
        mousewheelControl : true,
        // 如果需要分页器
        pagination: '.swiper-pagination',
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',

        //切换结束时，告诉我现在是第几个slide
        onSlideChangeEnd: function(swiper){
          that.updateView(swiper.realIndex)
        }
      })        
    }
	}
</script>

<style scoped lang="scss">
  .bg {
    position: relative;
    width: 100%;
    height: 100%;
  }

	.swiper-container {
    position: relative;
    height: calc(100% - 100px);
  }
</style>
